<template>
  <div>
    <h2>响应式原理</h2>
    <h3>数组</h3>
    {{arr}}
    <hr>
    <button @click="changeArr1">数据变页面变</button>
    <button @click="changeArr2">数据变页面不变</button>
     <button @click="changeArr3">修复-数据变页面不变</button>
    <hr>
    <h3>对象</h3>
    {{obj}}
    <hr>
    <button @click="changeObj1">数据变页面变</button>
    <button @click="changeObj2">数据变页面不变</button>
    <button @click="changeObj3">修复 - 数据变页面不变</button>
  </div>
</template>
<script>
const obj = {}
let str = 123
Object.defineProperty(obj,'us',{
  get() {
    console.log("获取使用数据")
    return str
  },
  set(val) {
    console.log("修改数据",val)
    console.log("发起notify 通知视图改变")
    str = val
  }
})

// console.log(obj)
// console.log(obj.us )
obj.us = 7777
console.log(obj.us )


export default {
  data() {
    return {
      name: "韩梅梅",
      arr: [1,2,3,4],
      obj:{
        us:"韩梅梅",
        ps:123
      }
    }
  },
  methods: {
    changeArr1() {
      this.arr.push(123)
    },
    changeArr2() {
      this.arr[0] = 666
      console.log(this.arr)
     
    },
    changeArr3() {
      // this.$set(this.arr,0,666)
       this.arr = [666,2,3,4]
    },
    changeObj1() {
      this.obj.us = "柯南"
    },
    changeObj2() {
      this.obj.age = 15
      console.log(this.obj)
    },
    changeObj3() {
      this.$set(this.obj,'age',16)
      console.log(this.obj)
      // this.obj = {
      //   ...this.obj,
      //   age: 15
      // }
    }
  },
  mounted(){
    console.log(this)
  }
}

</script>